<template>
  <div class="login-wrap">
    <div class="login">
      <el-form
        ref="forgetFormRef"
        :model="forgetForm"
        :rules="forgetRules"
        class="forget-form"
      >
        <!-- <h3 class="title">{{ title }}</h3> -->

        <h3 class="title">{{ $t("forget.retrievePassword") }}</h3>
       
        <el-form-item prop="email">
          <el-input
            v-model="forgetForm.email"
            type="text"
            size="default"
            auto-complete="off"
            ref="emailInputRef"
            :placeholder="$t('login.email')"
          >
            <template #prefix>
              <svg-icon name="email" />
            </template>
          </el-input>
        </el-form-item>

        <el-form-item style="width: 100%">
          <el-button
            :loading="loading"
            type="primary"
            size="default"
            round
            style="width: 100%"
            @click.prevent="handleForget"
          >
            <span v-if="!loading">{{ $t("login.submit") }}</span>
            <span v-else>{{ $t("login.submitting") }}...</span>
          </el-button>
        </el-form-item>
        <div style="text-align: center">
          <router-link class="link-type" :to="'/login'">{{
            $t("forget.return")
          }}</router-link>
        </div>
      </el-form>
    </div>

    <!--  底部  -->
    <div class="el-forget-footer">
      <div v-html="copyRight"></div>
    </div>
  </div>
</template>

<script setup name="forget">
import { forget } from "@/api/system/login";
import defaultSettings from "@/settings";
import { ElMessageBox } from "element-plus";

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const codeUrl = ref("");
const forgetForm = reactive({
  email: "",
});


const forgetFormRef = ref(null);
const loading = ref(false);

const forgetRules = reactive({
  email: [
    {
      required: true,
      type: "email",
      message: "请输入正确的邮箱地址",
      trigger: ["blur", "change"],
    },
  ],
});
const copyRight = computed(() => {
  return defaultSettings.copyright;
});

async function handleForget() {
  proxy.$refs["forgetFormRef"].validate((valid) => {
    if (valid) {
      loading.value = true;
      forget(forgetForm)
        .then((res) => {
          if (res.code == 200) {
            const useremail = forgetForm.email;
            ElMessageBox.alert(
              "<font color='red'>提交成功，您的email " +
                useremail +
                " 会收到找回密码链接，请注意查收！</font>",
              "系统提示",
              {
                dangerouslyUseHTMLString: true,
                type: "success",
              }
            )
              .then(() => {
                router.push("/login");
              })
              .catch(() => {});
          }
        })
        .catch(() => {
          loading.value = false;
        });
    }
  });
}
</script>

<style rel="stylesheet/scss" lang="scss">
@use "@/assets/styles/login.scss";
.forget {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-size: cover;
  flex-direction: column;
  background: radial-gradient(
    220% 105% at top center,
    #1b2947 10%,
    #4b76a7 40%,
    #81acae 65%,
    #f7f7b6
  );
}
.forget-form {
  padding: 15px 25px 15px 25px;
  height: 22s0spx;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  // color: #fff;
}

.el-forget-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #999999;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
</style>
